<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>阅视界——多语种写作多维智评与可视化系统</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mammoth/1.6.0/mammoth.browser.min.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
<!--    <script src="scoring.js"></script>-->
<!--    <script src="common.js"></script>-->
    <link rel="stylesheet" href="scoring-page.css">
    <link rel="stylesheet" href="index.css">
    <link rel="stylesheet" href="guide.css">
   
    <script>
        tailwind.config = {
            theme: {
                extend: {

                    colors: {
                        primary: '#3b82f6',
                        secondary: '#10b981'
                    },
                    borderRadius: {
                        'none': '0px',
                        'sm': '2px',
                        DEFAULT: '4px',
                        'md': '8px',
                        'lg': '12px',
                        'xl': '16px',
                        '2xl': '20px',
                        '3xl': '24px',
                        'full': '9999px',
                        'button': '4px'
                    }
                }
            }
        }
    </script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js"></script>
    <style>
        .nav-item:hover {
            color: #3b82f6;
        }
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
        .chart-container {
            width: 100%;
            height: 400px;
        }
        .dropdown {
            display: none;
        }
        .dropdown.show {
            display: block;
        }
    </style>
</head>
<body class="bg-gray-50 min-h-screen">
   <header>
    <div class="logo">阅视界</div>
    <ul class="nav-menu">
        <li><a href="index.html">首页</a></li>
        <li><a href="scoring-page.html" class="active">即时评分</a></li>
        <li><a href="history-review.html">评分历史</a></li>
        <li><a href="data-analysis.html">数据分析</a></li>
        <li><a href="feedback.html">反馈中心</a></li>
        <li><a href="guide.html">使用指南</a></li>
    </ul>
    <div class="user-actions">
        <div class="user-info" style="display: none;">
            <span id="username-display" style="cursor: pointer;"></span>
        </div>
        <div class="auth-buttons">
            <button class="primary" onclick="window.location.href='auth.html#login'">登录</button>
            <button onclick="window.location.href='auth.html#register'">注册</button>
        </div>
    </div>
</header>


    <div class="pt-16 min-h-screen">
        <div class="max-w-7xl mx-auto px-4 py-8">
            <div class="grid grid-cols-3 gap-8">
                <div class="col-span-2">
                    <div class="bg-white rounded-lg shadow-sm p-6 mb-8">
                        <h2 class="text-xl font-medium mb-4">提交作文</h2>
                        <div class="space-y-4">
                           <div class="flex space-x-4 w-full">
                               <div class="form-container space-y-4">
 <!-- 表单控件行 - 调整为水平排列 -->
        <div class="flex flex-wrap gap-4 items-end">

            <!-- 作文类型下拉框 -->
            <div class="flex-1 min-w-[180px]">
                <label class="text-sm font-medium text-gray-700 mb-1 block">作文类型</label>
                <div class="relative">
                    <button id="essayTypeBtn" onclick="toggleDropdown('typeDropdown')"
                            class="w-full px-4 py-2 border border-gray-300 rounded-md flex items-center justify-between focus:ring-2 focus:ring-blue-500">
                        <span id="selectedEssayType" class="flex items-center">
                            <span class="flag-icon cn mr-2"></span>
                            标准作文
                        </span>
                        <i class="fas fa-chevron-down ml-2 text-gray-500"></i>
                    </button>
                    <div id="typeDropdown" class="dropdown absolute top-full left-0 w-full mt-1 bg-white border border-gray-200 rounded-lg shadow-lg z-10 hidden">
                        <!-- 下拉选项保持不变 -->
                         <div class="px-4 py-2 hover:bg-gray-50 cursor-pointer flex items-center" onclick="selectEssayType('standard', '标准作文')">
          <span class="flag-icon standard mr-2"></span>
          标准作文
        </div>
        <div class="px-4 py-2 hover:bg-gray-50 cursor-pointer flex items-center" onclick="selectEssayType('en', '英文作文')">
          <span class="flag-icon en mr-2"></span>
          英文作文
        </div>
        <div class="px-4 py-2 hover:bg-gray-50 cursor-pointer flex items-center" onclick="selectEssayType('cn', '中文作文')">
          <span class="flag-icon cn mr-2"></span>
          中文作文
        </div>
        <div class="px-4 py-2 hover:bg-gray-50 cursor-pointer flex items-center" onclick="selectEssayType('fr', '法语作文')">
          <span class="flag-icon fr mr-2"></span>
          法语作文
        </div>
        <div class="px-4 py-2 hover:bg-gray-50 cursor-pointer flex items-center" onclick="selectEssayType('ru', '俄语作文')">
          <span class="flag-icon ru mr-2"></span>
          俄语作文
        </div>
        <div class="px-4 py-2 hover:bg-gray-50 cursor-pointer flex items-center" onclick="selectEssayType('es', '西班牙语作文')">
          <span class="flag-icon es mr-2"></span>
          西班牙语作文
        </div>
        <div class="px-4 py-2 hover:bg-gray-50 cursor-pointer flex items-center" onclick="selectEssayType('jp', '日语作文')">
          <span class="flag-icon jp mr-2"></span>
          日语作文
        </div>
                    </div>
                </div>
            </div>

            <!-- 反馈语言输入框 -->
            <div class="flex-1 min-w-[180px]">
                <label for="feedbackLanguage" class="text-sm font-medium text-gray-700 mb-1 block">反馈语言</label>
                <input type="text" id="feedbackLanguage" placeholder="请输入反馈语言"
                       class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
            </div>

            <!-- 模型选择下拉框 -->
            <div class="flex-1 min-w-[200px]">
                <label class="text-sm font-medium text-gray-700 mb-1 block">评分模型</label>
                <div class="relative">
                    <button id="modelBtn" onclick="toggleDropdown('modelDropdown')"
                            class="w-full px-4 py-2 border border-gray-300 rounded-md flex items-center justify-between focus:ring-2 focus:ring-blue-500">
                        <span id="selectedModel" class="whitespace-nowrap overflow-hidden text-ellipsis">GPT标准模型</span>
                        <i class="fas fa-chevron-down ml-2 text-gray-500"></i>
                    </button>
                    <div id="modelDropdown" class="dropdown absolute top-full left-0 w-full mt-1 bg-white border border-gray-200 rounded-lg shadow-lg z-10 hidden">
                        <!-- 模型选项将通过JavaScript动态生成 -->
                    </div>
                </div>
            </div>

             <!-- 作文标题输入框 -->
            <div class="flex-1 min-w-[200px]">
                <label for="essayTitle" class="text-sm font-medium text-gray-700 mb-1 block">作文标题</label>
                <input type="text" id="essayTitle" placeholder="请输入作文标题"
                       class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
            </div>
        </div>


</div>
                               </div>


                            <textarea id="content" class="w-full h-64 px-4 py-3 border border-gray-200 rounded-lg focus:outline-none focus:border-blue-500" placeholder="在此输入作文内容..."></textarea>

                            <div class="flex justify-between h-32 items-center">
                                <!-- 上传按钮 -->
                                <button id="uploadBtn" class="px-4 py-2 text-gray-600 hover:text-blue-500 flex items-center space-x-2 !rounded-button">
                                    <i class="fas fa-upload"></i>
                                    <span>上传文件</span>
                                </button>

                                <!-- 隐藏的文件选择器 -->
                                <input type="file" id="fileInput" style="display: none;" />

                                <button onclick="submitEssay()" id="submitBtn" class=" px-6 py-2 bg-blue-500 text-white hover:bg-blue-600 !rounded-button whitespace-nowrap">
                                    开始评分
                                </button>
                                <button onclick="clearContent()" class="px-6 py-2 bg-blue-300 text-white hover:bg-blue-300 !rounded-button flex items-center">
                                    清空内容
                                </button>
                            </div>
                        </div>
                    </div>
<!--最近一次评分模块-->
<div class="bg-white rounded-lg shadow-sm p-6">
    <h2 class="text-xl font-medium mb-4">最近一次评分结果</h2>

    <!-- 新增统计指标展示框 -->
    <div class="mb-6 p-4 bg-gray-50 rounded-lg">
        <div class="grid grid-cols-4 gap-4">
<!--            四大指标呈现-->
            <div class="text-center">
                <div class="text-sm text-gray-500 mb-1">总字数</div>
                <div class="flex items-center justify-center">
                    <span class="text-2xl font-medium text-blue-600">856</span>
                    <span class="text-sm text-gray-500 ml-1">字</span>
                </div>
                <div class="text-xs text-gray-400 mt-1">建议: 800-1000字</div>
            </div>
            <div class="text-center">
                <div class="text-sm text-gray-500 mb-1">句子数</div>
                <div class="flex items-center justify-center">
                    <span class="text-2xl font-medium text-green-600">32</span>
                    <span class="text-sm text-gray-500 ml-1">句</span>
                </div>
                <div class="text-xs text-gray-400 mt-1">平均句长: 26.7字</div>
            </div>
            <div class="text-center">
                <div class="text-sm text-gray-500 mb-1">词汇多样性</div>
                <div class="flex items-center justify-center">
                    <span class="text-2xl font-medium text-purple-600">0.82</span>
                </div>
                <div class="text-xs text-gray-400 mt-1">优秀: >0.8</div>
            </div>
            <div class="text-center">
                <div class="text-sm text-gray-500 mb-1">语法准确率</div>
                <div class="flex items-center justify-center">
                    <span class="text-2xl font-medium text-orange-600">96%</span>
                </div>
                <div class="text-xs text-gray-400 mt-1">优秀: >95%</div>
            </div>
        </div>

        <!-- 进度条展示 -->
        <div class="mt-4 space-y-2">
            <div>
                <div class="flex justify-between text-sm text-gray-600 mb-1">
                    <span>字数达标率</span>
                    <span>85.6%</span>
                </div>
                <div class="h-2 bg-gray-200 rounded-full overflow-hidden">
                    <div class="h-full bg-blue-500 rounded-full" style="width: 85.6%"></div>
                </div>
            </div>
            <div>
                <div class="flex justify-between text-sm text-gray-600 mb-1">
                    <span>句式多样性</span>
                    <span>78%</span>
                </div>
                <div class="h-2 bg-gray-200 rounded-full overflow-hidden">
                    <div class="h-full bg-green-500 rounded-full" style="width: 78%"></div>
                </div>
            </div>
        </div>
    </div>
                    <div class="bg-white rounded-lg shadow-sm p-6">
                        <h2 class="text-xl font-medium mb-4" >评分详情</h2>
<!-- 评分详情-->
                       <div id="scoreContainer" class="grid grid-cols-5 gap-4 mb-6">
    <div class="p-4 bg-blue-50 rounded-lg text-center">
        <div class="text-sm text-gray-600 mb-1">总分</div>
        <div id="total_Score" class="text-2xl font-medium text-blue-500">69</div>
    </div>
    <div class="p-4 bg-green-50 rounded-lg text-center">
        <div class="text-sm text-gray-600 mb-1">词汇运用</div>
        <div id="vocabulary_Score" class="text-2xl font-medium text-green-600">18</div>
    </div>
    <div class="p-4 bg-yellow-50 rounded-lg text-center">
        <div class="text-sm text-gray-600 mb-1">句子构建</div>
        <div id="sentence_Score" class="text-2xl font-medium text-yellow-600">16</div>
    </div>
    <div class="p-4 bg-purple-50 rounded-lg text-center">
        <div class="text-sm text-gray-600 mb-1">篇章结构</div>
        <div id="structure_Score" class="text-2xl font-medium text-purple-600">20</div>
    </div>
    <div class="p-4 bg-red-50 rounded-lg text-center">
        <div class="text-sm text-gray-600 mb-1">内容质量</div>
        <div id="content_Score" class="text-2xl font-medium text-red-600">15</div>
    </div>
</div>
 <div style="text-align: center;"> <!-- 添加一个新的 div 并设置 text-align: center 使按钮居中 -->
      <button id="detailButton"
        class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mb-4">
        点击查看详细分数分析
      </button>
    </div>
<!--作文雷达图-->
                           <div id="scoreChart" style="width: 100%; height: 400px;"></div>
  <!-- 优秀句子和建议 -->
<div class="mt-8 space-y-6" id="scoreContainer1" style="display: none;">

    <!-- 优秀句子 -->
    <div class="bg-white rounded-lg shadow-sm p-6 good-sentences">
        <h3 class="text-lg font-medium mb-4 text-green-600">
            <i class="fas fa-star mr-2" id="sentenceList"></i>优秀句子
        </h3>
        <ul class="sentence-list space-y-3">
            <!-- 优秀句子将通过JavaScript动态添加 -->
        </ul>
    </div>
<!--    <div class="bg-white rounded-lg shadow-sm p-6 good-sentences">-->
<!--        <h3 class="text-lg font-medium mb-4 text-green-600">-->
<!--            <i class="fas fa-star mr-2"></i>优秀句子-->
<!--        </h3>-->
<!--        <ul class="sentence-list space-y-3" id="sentenceList">-->
<!--            &lt;!&ndash; 优秀句子将通过JavaScript动态添加 &ndash;&gt;-->
<!--        </ul>-->
<!--    </div>-->

    <!-- 写作建议 -->
    <div class="bg-white rounded-lg shadow-sm p-6 suggestions">
        <h3 class="text-lg font-medium mb-4 text-blue-600">
            <i class="fas fa-lightbulb mr-2"></i>写作建议
        </h3>
        <ul class="suggestion-list space-y-3">
            <!-- 写作建议将通过JavaScript动态添加 -->
        </ul>
    </div>

</div>
                    </div>

                </div>
</div>
<!--最近评分静态呈现-->
                <div class="space-y-8">
                    <div class="bg-white rounded-lg shadow-sm p-6">
                        <h2 class="text-xl font-medium mb-4">最近评分</h2>
                        <div class="space-y-4">
                            <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                                <div>
                                    <div class="font-medium">《生命的意义》</div>
                                    <div class="text-sm text-gray-500">2024-01-15</div>
                                </div>
                                <div class="text-xl font-medium text-blue-500">89</div>
                            </div>
                            <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                                <div>
                                    <div class="font-medium">《我的理想》</div>
                                    <div class="text-sm text-gray-500">2024-01-14</div>
                                </div>
                                <div class="text-xl font-medium text-blue-500">85</div>
                            </div>
                            <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                                <div>
                                    <div class="font-medium">《春天的故事》</div>
                                    <div class="text-sm text-gray-500">2024-01-13</div>
                                </div>
                                <div class="text-xl font-medium text-blue-500">92</div>
                            </div>

                        </div>

                    </div>

<!--好词好句好段-->
                   <div class="bg-white rounded-lg shadow-sm p-6">
        <h2 class="text-xl font-medium mb-4">最近精彩点评</h2>
        <div class="space-y-4">
            <!-- 好词展示 -->
            <div class="p-3 bg-yellow-50 rounded-lg">
                <div class="flex items-center justify-between mb-2">
                    <span class="font-medium text-yellow-800">
                        <i class="fas fa-star text-yellow-500 mr-2"></i>优秀用词
                    </span>
                    <span class="text-sm text-gray-500">共发现 12 处</span>
                </div>
                <div class="flex flex-wrap gap-2">
                    <span class="px-2 py-1 bg-white rounded text-sm text-gray-700 border border-yellow-200 hover:border-yellow-400 cursor-pointer transition-colors">
                        熙熙攘攘
                    </span>
                    <span class="px-2 py-1 bg-white rounded text-sm text-gray-700 border border-yellow-200 hover:border-yellow-400 cursor-pointer transition-colors">
                        绘声绘色
                    </span>
                    <span class="px-2 py-1 bg-white rounded text-sm text-gray-700 border border-yellow-200 hover:border-yellow-400 cursor-pointer transition-colors">
                        络绎不绝
                    </span>
                    <!-- 更多好词... -->
                </div>
            </div>

            <!-- 好句展示 -->
            <div class="p-3 bg-blue-50 rounded-lg">
                <div class="flex items-center justify-between mb-2">
                    <span class="font-medium text-blue-800">
                        <i class="fas fa-quote-right text-blue-500 mr-2"></i>优美句子
                    </span>
                    <span class="text-sm text-gray-500">共发现 5 处</span>
                </div>
                <div class="space-y-2">
                    <div class="p-2 bg-white rounded border border-blue-200 hover:border-blue-400 cursor-pointer transition-colors">
                        <p class="text-gray-700">春风拂过脸庞，带来泥土的芬芳，整个世界都浸润在这充满生机的气息中。</p>
                        <div class="mt-1 text-sm text-gray-500">
                            <i class="fas fa-tags mr-1"></i>
                            <span class="mr-2">修辞手法：比喻、拟人</span>
                        </div>
                    </div>
                    <!-- 更多好句... -->
                </div>
            </div>

            <!-- 好段落展示 -->
            <div class="p-3 bg-purple-50 rounded-lg">
                <div class="flex items-center justify-between mb-2">
                    <span class="font-medium text-purple-800">
                        <i class="fas fa-paragraph text-purple-500 mr-2"></i>精彩段落
                    </span>
                    <span class="text-sm text-gray-500">共发现 3 处</span>
                </div>
                <div class="space-y-2">
                    <div class="p-2 bg-white rounded border border-purple-200 hover:border-purple-400 cursor-pointer transition-colors">
                        <p class="text-gray-700">清晨的阳光洒在操场上，映照出一片金黄。远处的山峦如同一幅泼墨山水画，若隐若现地漂浮在薄雾中。操场上早已聚集了许多同学，他们或站或坐，叽叽喳喳地讨论着即将开始的运动会。这番景象，构成了一幅生机勃勃的校园图画。</p>
                        <div class="mt-1 text-sm text-gray-500">
                            <i class="fas fa-thumbs-up mr-1"></i>
                            <span class="mr-2">亮点：环境描写生动，细节丰富</span>
                        </div>
                    </div>
                    <!-- 更多好段落... -->
                </div>
            </div>

            <!-- 互动提示 -->
            <div class="text-center text-sm text-gray-500 mt-4">
                <p>点击内容可查看详细点评和使用建议</p>
            </div>
        </div>
    </div>
<!-- 写作建议-->
                    <div class="bg-white rounded-lg shadow-sm p-6">
                        <h2 class="text-xl font-medium mb-4">写作风格</h2>
                        <div class="space-y-4">
                            <div class="p-3 bg-blue-50 rounded-lg">
                                <div class="font-medium mb-2 text-blue-800">内容方面</div>
                                <p class="text-sm text-gray-600">论述层次分明，但论据支撑不够充分，建议增加具体事例。</p>
                            </div>
                            <div class="p-3 bg-green-50 rounded-lg">
                                <div class="font-medium mb-2 text-green-800">语言方面</div>
                                <p class="text-sm text-gray-600">行文流畅，用词准确，但修辞手法可以更加丰富。</p>
                            </div>
                            <div class="p-3 bg-purple-50 rounded-lg">
                                <div class="font-medium mb-2 text-purple-800">结构方面</div>
                                <p class="text-sm text-gray-600">文章结构完整，过渡自然，结尾略显仓促。</p>
                            </div>
                            <div class="mt-4">

</div>
                     <!-- 用户详情模态窗口 -->
    <div id="user-modal" class="modal">
        <div class="modal-content user-modal-content">
            <span class="close-button">&times;</span>
            <div class="user-profile-header">
                <div class="user-avatar">
                    <img src="images/avatar.svg" alt="用户头像">
                </div>
                <h2 id="modal-username"></h2>
            </div>
            <div class="user-details">
                <div class="detail-item">
                    <div class="detail-icon">
                        <i class="fas fa-envelope"></i>
                    </div>
                    <div class="detail-info">
                        <label>邮箱</label>
                        <span id="modal-email"></span>
                    </div>
                </div>
                <div class="detail-item">
                    <div class="detail-icon">
                        <i class="fas fa-fingerprint"></i>
                    </div>
                    <div class="detail-info">
                        <label>用户ID</label>
                        <span id="modal-userid"></span>
                    </div>
                </div>
            </div>
            <div class="logout-section">
                <button class="logout-btn" onclick="handleLogout()">
                    <i class="fas fa-sign-out-alt"></i>
                    退出登录
                </button>
            </div>
        </div>
    </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>


        <script src="scoring.js"></script>
<div id="scoring-progress" class="fixed bottom-8 left-1/2 transform -translate-x-1/2 bg-white shadow-lg rounded-lg p-4 hidden z-50">
    <div class="flex items-center space-x-4">
        <div class="scoring-spinner w-8 h-8 border-4 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
        <div>
            <h3 class="font-medium text-gray-800">正在评分中...</h3>
            <div class="w-full bg-gray-200 rounded-full h-2.5 mt-2">
                <div id="scoring-progress-bar" class="bg-blue-600 h-2.5 rounded-full" style="width: 0%"></div>
            </div>
            <p id="scoring-status" class="text-sm text-gray-600 mt-1">正在分析作文内容</p>
        </div>
    </div>
</div>
</body>
</html>




